<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品列表</title>
  <link rel="stylesheet" href="/css/app.css">
</head>
<body>
  <table border="1">
    <tr><td>ID</td><td>名称</td><td>价格</td><td>图片</td></tr>
  </table>

  <script>
    let table = document.querySelector('table');
    //发送 AJAX 请求
    let xhr = new XMLHttpRequest();
    //设置响应体的结果类型为 JSON
    xhr.responseType = 'json';
    //初始化
    xhr.open('GET', 'http://127.0.0.1:8080/api/goods');
    //发送
    xhr.send();
    //绑定事件处理结果
    xhr.onreadystatechange = function(){
      //判断
      if(xhr.readyState === 4){
        if(xhr.status >= 200 && xhr.status < 300){
          //请求成功
          //遍历
          xhr.response.forEach(item => {
            //动态创建 DOM 节点
            let tr = document.createElement('tr');
            //创建 td
            let td1 = document.createElement('td');
            //设置标签文本
            td1.innerHTML = item.id;
            //创建 td
            let td2 = document.createElement('td');
            td2.innerHTML = item.title;
            //创建 td
            let td3 = document.createElement('td');
            td3.innerHTML = item.price;
            //创建 td
            let td4 = document.createElement('td');
            //创建
            let img = document.createElement('img');
            //设置图片的宽度
            img.width = '60';
            //设置 img 元素的 src
            img.src = item.remote_img;
            //将 img 插入到 td4 中
            td4.appendChild(img);

            //将 td 插入到 tr 中
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            tr.appendChild(td4);
            //将 tr 插入到 table
            table.appendChild(tr);
          })
        }else{
          //请求失败
          alert('请求失败~~');
        }
      }
    }

  </script>

</body>
</html>